<template>
    <ul v-show="visible" class="zx-select-group__wrap">
        <li class="zx-select-group__title">{{ label }}</li>
        <li>
            <ul class="zx-select-group">
                <slot />
            </ul>
        </li>
    </ul>
</template>

<script type="text/babel">
import Emitter from '@src/mixins/emitter';

export default {

    name: 'ZxOptionGroup',
    mixins: [Emitter],

    componentName: 'ZxOptionGroup',

    props: {
        label: String,
        disabled: {
            type: Boolean,
            default: false,
        },
    },

    data() {
        return {
            visible: true,
        };
    },

    watch: {
        disabled(val) {
            this.broadcast('ZxOption', 'handleGroupDisabled', val);
        },
    },

    created() {
        this.$on('queryChange', this.queryChange);
    },

    mounted() {
        if (this.disabled) {
            this.broadcast('ZxOption', 'handleGroupDisabled', this.disabled);
        }
    },

    methods: {
        queryChange() {
            this.visible = this.$children &&
                Array.isArray(this.$children) &&
                this.$children.some(option => option.visible === true);
        },
    },
};
</script>
